<!-- 购物车页 -->
<template>
    <div class="cart-box">
        <div v-for="item in cartList" :key="item.id" class="cart-item">

            <!-- 每个商品前的按钮 -->
            <van-checkbox
                :name="item"
                @click="onchxClickFn(item)"
                class="checkbox-btn"
                v-model="item.checked"
            ></van-checkbox>

            <!-- 商品信息 -->
            <van-card :price="item.retail_price" :thumb="item.list_pic_url">
                <template #num>
                    <van-stepper
                        v-model="item.number"
                        @change="onChange(item.number, item.id)"
                    />
                </template>

                <!-- 自定义标题，删除按钮 -->
                <template #title>
                    <span>{{ item.goods_name }}</span>
                    <van-icon
                        name="delete-o"
                        class="delete-icon"
                        @click="onDelete(item)"
                    />
                </template>
            </van-card>
        </div>
        <!-- 按钮 -->

        <!-- 下方结算 -->
        <!-- vant显示的数字不对，9999元会显示成99.99元，所以需要乘以100 -->
        <van-submit-bar
            :price="checkedGoodsAmount * 100"
            button-text="提交订单"
            @submit="onSubmit"
        >
            <van-checkbox @click="onClickCheckAll" v-model="checkedAll">全选</van-checkbox>

            <template #tip>
                你的收货地址不支持同城送,
                <span @click="onClickEditAddress">修改地址</span>
            </template>
            
        </van-submit-bar>
    </div>
</template>

<script>
import {
    GetCartData, UpdateCartData, DeleteCartData,
    ToggleCartCheckedData, DeleteCartData2
} from "@/https/http";

export default {
    name: "cart",
    data() {
        return {
            cartList: [], //商品总列表
            cartTotal: {}, //购物车数据
            // price: 0,
            goodsId: '',
            number: '',
            productId: '',
            id_: '',
            isChecked: '1',
            // productIdsList:[],
            productIds: '',
            checkedGoodsAmount: 0,  //选中的商品的总金额
            checkedAll: 0,
        };
    },

    methods: {
        // 获取数据
        getData() {
            // 发送请求，获取当前购物车的数据
            GetCartData().then((res) => {
                console.log(11111, res);
                this.cartList = res.data.cartList; //商品总列表
                this.cartTotal = res.data.cartTotal;  //购物车数据

                 //选中的商品的总金额
                this.checkedGoodsAmount = res.data.cartTotal.checkedGoodsAmount 

                // 如果有选中的商品
                if (this.cartTotal.checkedGoodsCount > 0) {
                    // 选中的商品数量===购物车内的所有商品总数量 时候，全选按钮就会被选中
                    if (this.cartTotal.checkedGoodsCount == this.cartTotal.goodsCount) {
                        this.checkedAll = true
                    } else {  //不相等的时候，全选按钮就不会被选中
                        this.checkedAll = false
                    }
                } else { // 如果没有选中的商品，全选按钮就不会被选中
                    this.checkedAll = false
                }

            });
        },

        // 删除单个商品的时候，发送删除商品的请求
        onDelete(item) {
            DeleteCartData2({ productIds: item.product_id.toString() }).then((res) => {
                if (res.errno === 0) {
                    this.getData()  //重新请求购物车商品数据，渲染
                }
            })
        },

        //  按下商品+1或者-1按钮， 购物车商品数量变化 ,onChange会接收变化的商品id
        onChange(value, id_) {
            this.cartList.forEach(item => {
                // 找出对应的goods_id,number
                if (item.id === id_) {
                    this.id_ = id_
                    this.goodsId = item.goods_id
                    this.number = item.number
                    this.productId = item.product_id
                }
            })
            // 发请求
            this.updateCartData()
        },

        // 购物车商品步进器功能接口  按下商品+1或者-1按钮，
        updateCartData() {
             // 直接发送更新数据请求，将当前的商品数量带着
            UpdateCartData({
                goodsId: this.goodsId, id: this.id_,
                number: this.number, productId: this.productId
            }).then((res) => {
                console.log(999, res);
                if (res.errno === 0) {
                    this.getData() //重新请求购物车商品数据，渲染
                }
            })
        },

        // 点击商品单选按钮，切换购物车商品选中状态，发送请求
        onchxClickFn(item) {
            this.isChecked = item.checked ? '1' : '0'
            this.productIds = item.product_id.toString()
            this.toggleCartCheckedData()
        },

        // 切换购物车商品选中状态，发送请求
        toggleCartCheckedData() {
            console.log(this.isChecked);
            ToggleCartCheckedData({
                isChecked: this.isChecked,
                productIds: this.productIds
            }).then((res) => {
                console.log(667, res);
                if (res.errno === 0) {
                    this.getData() //重新请求购物车商品数据，渲染
                }
            })
        },

        // 点击全选，切换购物车商品选中状态，发送请求
        onClickCheckAll() {
            this.isChecked = this.checkedAll ? '1' : '0'
            let productIdAllList = []

            this.cartList.forEach((item) => {
                productIdAllList.push(item.product_id.toString())
            })
            this.productIds = productIdAllList.join(',')
            this.toggleCartCheckedData()
        },
        
        // 提交
        onSubmit() { },
        // 编辑地址
        onClickEditAddress() { },
    },
    created() {
        this.getData();
    },
};
</script>
<style scoped lang="less">
/deep/.van-checkbox__label {
    flex: 1;
}
/deep/.van-checkbox {
    margin-bottom: 2px;
}
/deep/.van-submit-bar {
    bottom: 50px;
}
.cart-box {
    padding-bottom: 150px;
    box-sizing: border-box;
    .van-card {
        position: relative;
    }
    .delete-icon {
        position: absolute;
        top: 5px;
        right: 5px;
    }
    .cart-item {
        position: relative;
        padding-left: 40px;
        .checkbox-btn {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
}
</style>